<template>
    <div class="packaging-dashboard">
      <!-- 1号工位独立展示区 -->
      <div class="station-1-card">
        <div class="card-header">
          <h3 class="card-title">1号工位：托盘进站-尺寸测量</h3>
          <div class="card-status">
            <span class="status-tag" :class="getStatusClass(station1Data.status)">{{ getStatusText(station1Data.status) }}</span>
            <span class="update-time">更新于: {{ station1Data.updateTime }}</span>
          </div>
        </div>
        
        <div class="card-content">
          <!-- 基础信息行 -->
          <div class="basic-info">
            <div class="info-item">
              <span class="info-label">当前位置：</span>
              <span class="info-value">{{ station1Data.location || '尺寸测量位' }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">任务编号：</span>
              <span class="info-value">{{ station1Data.taskId || '-' }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">面单号：</span>
              <span class="info-value">{{ station1Data.waybillId || '-' }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">容器编号：</span>
              <span class="info-value">{{ station1Data.containerId || '-' }}</span>
            </div>
          </div>
          
          <!-- 测量数据行（水平排列） -->
          <div class="measure-data-horizontal">
            <div class="data-section">
              <h4 class="section-title">尺寸测量数据</h4>
              <div class="data-grid">
                <div class="data-item">
                  <span class="data-label">长度</span>
                  <span class="data-value">{{ station1Data.measureLength || 0 }} mm</span>
                </div>
                <div class="data-item">
                  <span class="data-label">宽度</span>
                  <span class="data-value">{{ station1Data.measureWidth || 0 }} mm</span>
                </div>
                <div class="data-item">
                  <span class="data-label">高度</span>
                  <span class="data-value">{{ station1Data.measureHeight || 0 }} mm</span>
                </div>
              </div>
            </div>
            
            <div class="data-section">
              <h4 class="section-title">包装规格数据</h4>
              <div class="data-grid">
                <div class="data-item">
                  <span class="data-label">长度</span>
                  <span class="data-value">{{ station1Data.packLength || 0 }} mm</span>
                </div>
                <div class="data-item">
                  <span class="data-label">宽度</span>
                  <span class="data-value">{{ station1Data.packWidth || 0 }} mm</span>
                </div>
                <div class="data-item">
                  <span class="data-label">高度</span>
                  <span class="data-value">{{ station1Data.packHeight || 0 }} mm</span>
                </div>
              </div>
            </div>
            
            <div class="data-section">
              <h4 class="section-title">材料使用数据</h4>
              <div class="data-grid">
                <div class="data-item">
                  <span class="data-label">出纸宽度</span>
                  <span class="data-value">{{ station1Data.paperOutWidth || 0 }} mm</span>
                </div>
                <div class="data-item">
                  <span class="data-label">用纸宽度</span>
                  <span class="data-value">{{ station1Data.paperUseWidth || 0 }} mm</span>
                </div>
                <div class="data-item">
                  <span class="data-label">出纸长度</span>
                  <span class="data-value">{{ station1Data.paperOutLength || 0 }} mm</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 全工位表格监控区 - 修复表头滚动问题 -->
      <div class="stations-table">
        <div class="table-header">
          <h3 class="table-title">包装机全工位监控</h3>
          <span class="total-count">共 {{ allStationsData.length }} 个工位</span>
        </div>
        
        <!-- 表格容器结构调整，确保表头固定 -->
        <div class="table-container">
          <!-- 表头容器（固定） -->
          <div class="table-header-container">
            <table class="monitor-table header-table">
              <thead>
                <tr>
                  <th style="width: 100px;">工位编号</th>
                  <th style="width: 180px;">工位名称</th>
                  <th style="width: 160px;">当前位置</th>
                  <th style="width: 160px;">任务编号</th>
                  <th style="width: 120px;">状态</th>
                  <th style="width: 140px;">操作时间</th>
                </tr>
              </thead>
            </table>
          </div>
          
          <!-- 内容滚动容器 -->
          <div class="table-body-container">
            <el-scrollbar class="table-scrollbar">
              <table class="monitor-table body-table">
                <tbody>
                  <template v-for="station in allStationsData" :key="station.id">
                    <tr :class="getRowClass(station)">
                      <td style="width: 100px;">{{ station.id }}</td>
                      <td style="width: 180px;">{{ station.name }}</td>
                      <td style="width: 160px;">
                        <span class="location-tag">{{ station.location || '-' }}</span>
                      </td>
                      <td style="width: 160px;">{{ station.taskId || '-' }}</td>
                      <td style="width: 120px;">
                        <span class="status-tag" :class="getStatusClass(station.status)">{{ getStatusText(station.status) }}</span>
                      </td>
                      <td style="width: 140px;">{{ station.operateTime || '-' }}</td>
                    </tr>
                  </template>
               
                </tbody>
              </table>
            </el-scrollbar>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, watch, onMounted } from 'vue';
  import { ElScrollbar } from 'element-plus';
  
  // 接收父组件推送的全量实时数据
  const props = defineProps({
    realtimeData: {
      type: Array,
      required: false,
      default: () => []
    }
  });
  
  // 1号工位数据（单独提取）
  const station1Data = ref({});
  
  // 所有工位数据（用于表格）
  const allStationsData = ref([]);
  
  // 测试数据
  const testData = [
    {
      id: '1',
      name: '托盘进站-尺寸测量',
      location: '尺寸测量位',
      status: 2, // 运行中
      taskId: 'T250822001',
      waybillId: 'WB87654321',
      containerId: 'CT1001',
      operateTime: '09:35:22',
      measureLength: 450,
      measureWidth: 320,
      measureHeight: 280,
      packLength: 480,
      packWidth: 350,
      packHeight: 300,
      paperOutWidth: 500,
      paperUseWidth: 490,
      paperOutLength: 600
    },
    {
      id: '2',
      name: '机械手抓取扫码校验',
      location: '机械手抓取位',
      status: 2, // 运行中
      taskId: 'T250822001',
      waybillId: 'WB87654321',
      operateTime: '09:36:10'
    },
    {
      id: '3',
      name: '托盘包裹解绑',
      location: '纸箱成型位',
      status: 2, // 已完成
      taskId: 'T250822001',
      waybillId: 'WB87654321',
      operateTime: '09:34:55'
    },
    {
      id: '4',
      name: '面单打印-输出',
      location: '打印面单位',
      status: 2, // 运行中
      taskId: 'T250822001',
      waybillId: 'WB87654321',
      operateTime: '09:35:40'
    },
    {
      id: '5',
      name: '面单校验-确认',
      location: '校验面单位',
      status: 2, // 未运行
      taskId: 'T250822001',
      waybillId: 'WB87654321',
      operateTime: '-'
    },
    {
      id: '6',
      name: '上传客户系统',
      location: '已出站',
      status: 2, 
      taskId: 'T250822001',
      waybillId: 'WB87654321',
      operateTime: '09:33:20'
    }
  ];
  
  // 格式化时间
  const formatTime = (date) => {
    return `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}:${date.getSeconds().toString().padStart(2, '0')}`;
  };
  
  // 数据处理函数
  const processData = (data) => {
    if (!Array.isArray(data)) return;
    
    // 提取1号工位数据
    const station1 = data.find(item => item.id === '1') || {};
    station1Data.value = {
      ...station1,
      updateTime: formatTime(new Date())
    };
    
    // 所有工位数据
    allStationsData.value = [...data];
  };
  
  // 监听数据更新
  watch(
    () => props.realtimeData,
    (newData) => {
      const dataToUse = newData.length > 0 ? newData : testData;
      processData(dataToUse);
    },
    { immediate: true, deep: true }
  );
  
  // 初始化测试数据
  onMounted(() => {
    if (props.realtimeData.length === 0) {
      processData(testData);
    }
  });
  
  // 状态文本映射
  const getStatusText = (status) => {
    const statusMap = {
      0: '未运行',
      1: '运行中',
      2: '已完成',
      3: '异常'
    };
    return 'ok'
    return statusMap[status] || '未知';
  };
  
  // 状态样式映射
  const getStatusClass = (status) => {
    const classMap = {
      0: 'status-pending',
      1: 'status-running',
      2: 'status-completed',
      3: 'status-error'
    };
    return classMap[status] || 'status-pending';
  };
  
  // 行样式（运行中高亮）
  const getRowClass = (station) => {
    return station.status === 1 ? 'row-running' : '';
  };
  </script>
  
  <style scoped>
  /* 全局样式 - 固定高度不增长 */
  .packaging-dashboard {
    width: 100%;
    height: 100%;
    max-height: 100%;
    box-sizing: border-box;
    background-color: rgb(4, 28, 74);
    display: flex;
    flex-direction: column;
    gap: 1vw;
    overflow: hidden;
  }
  
  /* 1号工位卡片样式 */
  .station-1-card {
    background: linear-gradient(145deg, rgb(12, 42, 95), rgb(8, 34, 82));
    border: 1px solid rgba(95, 158, 255, 0.3);
    border-radius: 0.6vw;
    box-sizing: border-box;
    box-shadow: 0 0.3vw 1vw rgba(0, 10, 30, 0.5);
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8vw;
    border-bottom: 1px solid rgba(95, 158, 255, 0.2);
  }
  
  .card-title {
   font-size: clamp(16px,1.1vw,18px);
    font-weight: 600;
    color: #8ec5fc;
    margin: 0;
  }
  
  .card-status {
    display: flex;
    align-items: center;
    gap: 1vw;
  }
  
  .update-time {
    font-size: 0.8vw;
    color: #b0c4de;
  }
  
  /* 1号工位内容区 */
  .card-content {
    height: calc(100% - 45px);
    display: flex;
    flex-direction: column;
    gap: 0.8vw;
     padding: 0px 12px 12px;
    box-sizing: border-box;
  }
  
  /* 基础信息 */
  .basic-info {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2vw;
  }
  
  .info-item {
    flex: 0 0 auto;
    min-width: 140px;
  }
  
  .info-label {
    font-size: 0.8vw;
    color: #b0c4de;
    margin-right: 0.3vw;
  }
  
  .info-value {
    font-size: 14px;
    color: #e0f0ff;
    font-weight: 500;
  }
  
  /* 测量数据 - 水平排列 */
  .measure-data-horizontal {
    flex: 1;
    display: flex;
    gap: 0.8vw;
    padding-bottom: 0.3vw;
  }
  
  .data-section {
    flex: 1;
    min-width: 200px;
    background: rgba(10, 36, 85, 0.5);
    border-radius: 0.4vw;
    padding: 0.6vw;
    box-sizing: border-box;
  }
  
  .section-title {
    font-size: 14px;
    color: #8ec5fc;
    margin: 0 0 0.6vw 0;
    padding-bottom: 0.3vw;
    border-bottom: 1px solid rgba(95, 158, 255, 0.2);
  }
  
  .data-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5vw;
    height: calc(100% - 25px);
  }
  
  .data-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4vw;
    background: rgba(15, 45, 100, 0.3);
    border-radius: 0.3vw;
  }
  
  .data-label {
    font-size: 14px;
    color: #b0c4de;
  }
  
  .data-value {
    font-size: 14px;
    color: #ffffff;
    font-weight: 600;
  }
  
  /* 表格区域样式 - 修复滚动问题 */
  .stations-table {
    flex: 1;
    max-height: 70%;
    background: linear-gradient(145deg, rgb(12, 42, 95), rgb(8, 34, 82));
    border: 1px solid rgba(95, 158, 255, 0.3);
    border-radius: 0.6vw;
    box-sizing: border-box;
    box-shadow: 0 0.3vw 1vw rgba(0, 10, 30, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  
  .table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8vw;
    border-bottom: 1px solid rgba(95, 158, 255, 0.2);
    position: relative;
    z-index: 10;
  }
  
  .table-title {
   font-size: clamp(16px,1.1vw,18px);
    font-weight: 600;
    color: #8ec5fc;
    margin: 0;
  }
  
  .total-count {
    font-size: 0.8vw;
    color: #8ec5fc;
    padding: 0.2vw 0.6vw;
    background: rgba(15, 45, 100, 0.3);
    border-radius: 0.3vw;
  }
  
  /* 表格容器结构 - 分离表头和内容 */
  .table-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
     padding: 0px 12px 12px;
    box-sizing: border-box;
  }
  
  /* 表头容器 - 固定不动 */
  .table-header-container {
    flex: 0 0 auto;
    border-bottom: 1px solid rgba(95, 158, 255, 0.3);
    position: relative;
    z-index: 5;
  }
  
  /* 内容滚动容器 */
  .table-body-container {
    flex: 1;
    overflow: hidden;
    position: relative;
  }
  
  /* Element滚动条容器 */
  .table-scrollbar {
    height: 100%;
    width: 100%;
  }
  
  /* 表格样式 */
  .monitor-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
  }
  
  /* 表头样式 */
  .header-table th {
    padding: 0.7vw;
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    color: #8ec5fc;
    background: rgba(10, 36, 85, 0.9);
    border-bottom: none;
  }
  
  /* 内容表格样式 */
  .body-table td {
    padding: 0.7vw;
    font-size: 14px;
    color: #e0f0ff;
    border-bottom: 1px solid rgba(95, 158, 255, 0.15);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* 状态和位置标签样式 */
  .status-tag {
    display: inline-block;
    padding: 0.2vw 0.5vw;
    border-radius: 0.2vw;
    font-size: 0.75vw;
    font-weight: 500;
  }
  
  .status-pending {
    background: rgba(100, 149, 237, 0.2);
    color: #b0c4de;
  }
  
  .status-running {
    background: rgba(255, 215, 0, 0.2);
    color: #fffacd;
  }
  
  .status-completed {
    background: rgba(50, 205, 50, 0.2);
    color: #98fb98;
  }
  
  .status-error {
    background: rgba(255, 99, 71, 0.2);
    color: #ffccd5;
  }
  
  .location-tag {
    display: inline-block;
    padding: 0.2vw 0.5vw;
    background: rgba(100, 149, 237, 0.15);
    color: #8ec5fc;
    border-radius: 0.2vw;
    font-size: 0.8vw;
  }
  
  /* 表格行样式 */
  .row-running {
    background: rgba(255, 215, 0, 0.05);
    border-left: 3px solid #ffd700;
  }
  
  .body-table tbody tr:hover {
    background: rgba(100, 149, 237, 0.05);
  }
  
  /* 响应式调整 */
  @media (max-width: 1600px) {
    .info-item {
      min-width: 120px;
    }
    
    .data-section {
      min-width: 160px;
    }
  }
  </style>